<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/home.css">
    <title>用户管理系统</title>
</head>

<body>
<div class="container-fluid">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">简单的用户管理系统</a>
        <div class="navbar-nav ml-auto">
            <div class="nav-item">
                <img src="../images/tx.jpg" alt="用户头像" width="30" height="30" class="rounded-circle">
                <span>用户名</span>
            </div>
        </div>
    </nav>
    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="row">
            <!-- 左侧导航栏 -->
            <div class="sidebar">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">
                        <span><i class="fas fa-cogs"></i></span> 系统管理
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <span><i class="fas fa-users"></i></span> 用户管理
                    </a>
                </div>
            </div>
            <!-- 用户管理主要内容 -->
            <div class="col-md-9">
                <!-- 第一部分：搜索和筛选部分 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="loginName">登录名称：</label>
                                <input type="text" class="form-control" id="loginName" placeholder="请输入登录名称">
                            </div>
                            <div class="form-group">
                                <label for="mobileNumber">手机号码：</label>
                                <input type="text" class="form-control" id="mobileNumber" placeholder="请输入手机号码">
                            </div>
                            <div class="form-group">
                                <label for="userStatus">用户状态：</label>
                                <select class="form-control" id="userStatus">
                                    <option value="active">启用</option>
                                    <option value="inactive">禁用</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="creationTime">创建时间：</label>
                                <input type="date" class="form-control" id="creationTime">
                            </div>
                            <button type="submit" class="btn btn-primary">查询</button>
                        </form>
                    </div>
                </div>
                <!-- 第二部分：用户信息表格 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>用户 ID</th>
                                <th>登录名称</th>
                                <th>用户姓名</th>
                                <th>部门</th>
                                <th>手机</th>
                                <th>用户状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>user1</td>
                                <td>张三</td>
                                <td>研发部</td>
                                <td>138xxxx1234</td>
                                <td>启用</td>
                                <td>2023-01-01</td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-primary">新增用户</button>
                                        <button class="btn btn-sm btn-warning">修改</button>
                                        <button class="btn btn-sm btn-danger">删除</button>
                                        <button class="btn btn-sm btn-success">启用</button>
                                        <button class="btn btn-sm btn-secondary">禁用</button>
                                        <button class="btn btn-sm btn-info">导出</button>
                                    </div>
                                </td>
                            </tr>
                            <!-- 更多用户记录 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 第三部分：分页导航 -->
                <div class="row">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    // 这里可以添加 JavaScript 交互逻辑，例如点击按钮的操作
    $('.btn-primary').click(function () {
        // 模拟查询操作
        console.log('执行查询');
    });
</script>
</body>

</html>